<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../dist/avalon.js"></script>
        <script>

            function heredoc(fn) {
                return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
                        replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
            }
            var expect = function (a) {
                return {
                    to: {
                        equal: function (b) {
                            console.log(a, b, a === b)
                        }
                    }
                }
            }
            var called = false
            var vm = avalon.define({
                $id: 'for0',
                array: [1, 2, 3, 4, 5],
                fn: function () {
                    called = true
                },
                object: {
                    a: 11,
                    b: 22,
                    c: 33,
                    d: 44,
                    e: 55
                }
            })
            window.onload = function () {
                var div = document.getElementById('aaa')
                var lis = div.getElementsByTagName('li')
                var ps = div.getElementsByTagName('p')
                expect(lis[0].innerHTML).to.equal('0::1')
                expect(lis[1].innerHTML).to.equal('1::2')
                expect(lis[2].innerHTML).to.equal('2::3')
                expect(lis[3].innerHTML).to.equal('3::4')
                expect(lis[4].innerHTML).to.equal('a::11')
                expect(lis[5].innerHTML).to.equal('b::22')
                expect(lis[6].innerHTML).to.equal('c::33')
                expect(lis[7].innerHTML).to.equal('d::44')
                expect(lis[8].innerHTML).to.equal('e::55')
                expect(ps[0].innerHTML).to.equal('1')
                expect(ps[1].innerHTML).to.equal('2')
                expect(ps[2].innerHTML).to.equal('3')
                expect(ps[3].innerHTML).to.equal('4')
                expect(ps[4].innerHTML).to.equal('5')
                expect(called).to.equal(true)
                vm.array.reverse()
                vm.array.unshift(9)
                setTimeout(function () {
                    expect(lis[0].innerHTML + "!").to.equal('0::9!')
                    expect(lis[1].innerHTML).to.equal('1::5')
                    expect(lis[2].innerHTML).to.equal('2::4')
                    expect(lis[3].innerHTML).to.equal('3::3')
                    expect(ps[0].innerHTML).to.equal('9')
                    expect(ps[1].innerHTML).to.equal('5')
                    expect(ps[2].innerHTML).to.equal('4')
                    expect(ps[3].innerHTML).to.equal('3')
                    expect(ps[4].innerHTML).to.equal('2')

                }, 300)

            }
        </script>
    </head>
    <body>
        <div ms-controller='for0' id="aaa">
            <ul>
                <li ms-for='($index, el) in @array | limitBy(4)' data-for-rendered="@fn">{{$index}}::{{el}}</li>
            </ul>
            <ol>
                <li ms-for='($key, $val) in @object'>{{$key}}::{{$val}}</li>
            </ol>
            <!--ms-for: ($index,el) in @array   -->
            <p>{{el}}</p>
            <!--ms-for-end:-->
        </div>
    </body>
</html>

ms-on-click="aaa == null ? '111': String(aaa+bbb) "